<template>
  <div class="house-form-container">
    <h2>{{ isEditing ? '编辑房源' : '添加新房源' }}</h2>
    <form @submit.prevent="handleSubmit" class="house-form">
      <div class="form-group">
        <label for="title">标题:</label>
        <input
          type="text"
          id="title"
          v-model="formData.title"
          required
          :class="['form-control', { 'is-invalid': errors.title }]"
        >
        <div v-if="errors.title" class="invalid-feedback">{{ errors.title }}</div>
      </div>
  
        <div class="form-group">
        <label for="price">价格:</label>
        <input
          type="number"
          id="price"
          v-model="formData.price"
          required
          :class="['form-control', { 'is-invalid': errors.price }]"
        >
        <div v-if="errors.price" class="invalid-feedback">{{ errors.price }}</div>
      </div>

      <div class="form-group">
        <label for="area">面积 (m²):</label>
        <input
          type="number"
          id="area"
          v-model="formData.area"
          required
          :class="['form-control', { 'is-invalid': errors.area }]"
        >
        <div v-if="errors.area" class="invalid-feedback">{{ errors.area }}</div>
      </div>

      <div class="form-group">
        <label for="bedrooms">卧室数量:</label>
        <input
          type="number"
          id="bedrooms"
          v-model="formData.bedrooms"
          required
          min="0"
          :class="['form-control', { 'is-invalid': errors.bedrooms }]"
        >
        <div v-if="errors.bedrooms" class="invalid-feedback">{{ errors.bedrooms }}</div>
      </div>

      <div class="form-group">
        <label for="bathrooms">浴室数量:</label>
        <input
          type="number"
          id="bathrooms"
          v-model="formData.bathrooms"
          required
          min="0"
          :class="['form-control', { 'is-invalid': errors.bathrooms }]"
        >
        <div v-if="errors.bathrooms" class="invalid-feedback">{{ errors.bathrooms }}</div>
      </div>

      <div class="form-group">
        <label for="photos">照片URLs (用逗号分隔):</label>
        <input
          type="text"
          id="photos"
          v-model="formData.photos"
          :class="['form-control', { 'is-invalid': errors.photos }]"
          placeholder="例如: https://example.com/photo1.jpg,https://example.com/photo2.jpg"
        >
        <div v-if="errors.photos" class="invalid-feedback">{{ errors.photos }}</div>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn save-btn">{{ isEditing ? '更新' : '保存' }}</button>
        <button type="button" @click="handleCancel" class="btn cancel-btn">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'HouseForm',
  props: {
    isEditing: {
      type: Boolean,
      required: true,
      default: false
    },
    initialData: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {
        title: '',
        price: '',
        area: '',
        bedrooms: '',
        bathrooms: '',
        photos: ''
      },
      errors: {}
    };
  },
  watch: {
    initialData: {
      handler(newVal) {
        if (newVal) {
          this.formData = { ...newVal };
        }
      },
      immediate: true
    }
  },
  methods: {
    handleSubmit() {
      // 简单表单验证
      this.errors = {};
      let isValid = true;

      if (!this.formData.title) {
        this.errors.title = '标题不能为空';
        isValid = false;
      }
      if (!this.formData.price || this.formData.price <= 0) {
        this.errors.price = '请输入有效的价格';
        isValid = false;
      }
      if (!this.formData.area || this.formData.area <= 0) {
        this.errors.area = '请输入有效的面积';
        isValid = false;
      }
      if (this.formData.bedrooms < 0) {
        this.errors.bedrooms = '卧室数量不能为负数';
        isValid = false;
      }
      if (this.formData.bathrooms < 0) {
        this.errors.bathrooms = '浴室数量不能为负数';
        isValid = false;
      }
      if (!this.formData.photos) {
        this.errors.photos = '请至少提供一张照片URL';
        isValid = false;
      } else if (!this.formData.photos.includes(',')) {
        // 验证至少有一个逗号分隔的URL
        this.errors.photos = '请提供多个照片URL，用逗号分隔';
        isValid = false;
      }
      if (!isValid) return;
      const houseData = { ...this.formData };
      // 将逗号分隔的字符串转换为数组
      houseData.photos = houseData.photos.split(',').map(url => url.trim());
      this.$emit('save-house', houseData);
      this.resetForm();
    },
    handleCancel() {
      this.$emit('cancel-form');
      this.resetForm();
    },
    resetForm() {
      this.formData = {
        title: '',
        price: '',
        area: '',
        bedrooms: '',
        bathrooms: ''
      };
    }
  }
};
</script>

<style scoped>
.house-form-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.house-form {
  display: grid;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-control.is-invalid {
  border-color: #dc3545;
}

.invalid-feedback {
  color: #dc3545;
  font-size: 14px;
  margin-top: 4px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.save-btn {
  background-color: #28a745;
  color: white;
}

.cancel-btn {
  background-color: #6c757d;
  color: white;
}
</style>